<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" class="btn" value="播放" onclick="myOnclick()">
    <div>
      <span><input type="text" class="input" value="0"></span>
      <span>
      <input type="button" class="add" value="+1" onclick="Add()">
      <input type="button" class="sub" value="-1" onclick="Sub()">
     </span>
</body>
<style>
      div {
        width: 400px;
        height: 300px;
        background-image: url(./BigHeadNagisa.png);
        display: flex;
        margin: 0 auto;
        justify-content: center
      }

      div span {
        margin-left: 10px;
      }
</style>
<script>
    let btn = document.querySelector('.btn');
    function myOnclick() {
        if(btn.value == '播放')
           btn.value = '暂停'
        else 
          btn.value = '播放'
    }
    let input = document.querySelector('.input');
    
    function Add() {
        input.value = parseInt(input.value) + 1;
    }

    function Sub() {
        input.value = parseInt(input.value) - 1;
    }

</script>
</html>